<template>
  <el-container id="Registered">
    <el-main>
      <el-row justify="center" type="flex">
        <el-col :lg="8" :md="10" :sm="12" :xl="8" :xs="24">
          <div class="main">
            <div class="box">
              <img src="~@/assets/logo.png" class="title" alt="logo" style="">
              <h1 style="margin-top: 30px">注册</h1>
              <el-form :model="LoginForm" style="text-align: center">
                <el-form-item style="margin-top: 10%">
                  <el-input v-model="LoginForm.username" placeholder="用户名" prefix-icon="el-icon-user-solid"
                            style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                  <el-input v-model="LoginForm.password" placeholder="密码" prefix-icon="el-icon-unlock"
                            style="width: 75%">
                  </el-input>
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                  <el-button icon="el-icon-s-promotion" type="primary" @keydown.enter="Registered" @click="Registered">
                    注册
                  </el-button>
                </el-form-item>
                <div class="registered">
                  <a href="/">登录</a>
                </div>
              </el-form>
            </div>
          </div>
        </el-col>
      </el-row>

    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Registered",
  data() {
    return {
      LoginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    Registered() {
      if (this.LoginForm.username != '' || this.LoginForm.password != '') {
        this.$axios1.post('/registered', {
          "username": this.LoginForm.username,
          "password": this.LoginForm.password,
        }).then((res) => {
              let data = res.data.code
              if (data === "200") {
                this.$message({
                  message: '注册成功',
                  type: 'success'
                });
                this.$router.push({path: '/'})
              } else {
                this.$message.error('已注册');
              }
            }
        )
      }else{
        this.$message.error("账户或密码不能为空！")
      }
    }
  },
  mounted() {
    this.$axios2.post('/login').then((res) => {
      let code = res.data.code
      if (code === 200) {
        this.$router.push('/task')
      } else {
        console.log('未登录')
      }
    })
  }

}
</script>

<style scoped>
.main {
  min-height: calc(100vh - 40px);
  display: flex;
  color: white;
  justify-content: center;
}

.main .box {
  width: 100%;
  height: 350px;
  margin: auto;
  background-color: #102439;
}

.main .box .registered {
  float: right;
  padding-right: 50px;
}

.main .box .registered a {
  text-decoration: none;
  color: white;
  height: 30px;
  width: 50px;
  line-height: 30px;
  padding-left: 20px;
}

.main .box h1 {
  text-align: center;
}
.title {
  height: 60px;
  width: 200px;
  position: absolute;
  top: -120px;
  left: calc(50% - 115px)
}
</style>